<template>
	<view class="recharge-box">
		<u-navbar @rightClick="rightClick" :autoBack="true" placeholder bgColor="#1daeff">
			<template #center>
				<view class="nav-title">充值中心</view>
			</template>
		</u-navbar>
		<view class="number-box u-m-b-40">
			<view class="u-flex u-flex-center" v-show="isCustom">
				<view style="width: 300rpx;">
					<u-input
						customStyle="color:#fff;font-size:70rpx;height:80rpx;font-weight:bold"
						color="#fff"
						inputAlign="center"
						fontSize="70rpx"
						border="bottom"
						type="digit"
						v-model="rechargeMoney"
					>
						<template slot="suffix">
							元
						</template>
					</u-input>
				</view>
			</view>

			<view class="recharge-number" v-show="!isCustom">{{ rechargeMoney }}元</view>
			<view class="tip-recharge-text">
				<u-icon name="question-circle-fill" color="#fff"></u-icon>
				温馨提示：详细的充值优惠请点击
				<text class="info-text" @click="jumpPage('/packMyself/recharge/rechargeRule')">详情</text>
				前往
			</view>
		</view>
		<view class="recharge-btn-box">
			<view
				class="recharge-btn"
				@click="changeRecharge(item, false)"
				:class="{ 'change-recharge': rechargeMoney === item.id && !isCustom }"
				v-for="item in rechargeList"
				:key="item.id"
			>
				{{ item.name }}
			</view>
			<view class="recharge-btn" :class="{ 'change-recharge': isCustom }" @click="changeRecharge(null, true)">自定义</view>
		</view>
		<bottomBtn title="充值" @change="requestSubscribeMessage" :loading="loading" />
	</view>
</template>

<script>
import bottomBtn from '@/components/bottomBtn.vue';
export default {
	components: { bottomBtn },
	data() {
		return {
			rechargeList: [{ id: 10, name: '10元' }, { id: 30, name: '30元' }, { id: 50, name: '50元' }, { id: 100, name: '100元' }, { id: 200, name: '200元' }],
			rechargeMoney: 10, // 充值金额
			isCustom: false, // 是否是自定义
			loading: false
		};
	},
	methods: {
		// 跳转页面
		jumpPage(url) {
			uni.navigateTo({
				url
			});
		},
		// 选择充值金额
		changeRecharge(info, type) {
			this.isCustom = type;
			if (info) this.rechargeMoney = info.id;
		},
		// 充值
		async requestPayment() {
			if (this.rechargeMoney * 100 < 1) return this.$u.toast('充值金额不能低于1分钱');
			this.loading = true;

			// 1. 先换取临时code  2. 将临时code 换取openid  3. 将openid换取支付凭证
			uni.login({
				provider: 'weixin',
				success: async res => {
					if (res.errMsg === 'login:ok') {
						const info = await this.$api.wechat.WXopenid({
							code: res.code,
							type: 2
						});
						if (info.data && info.data.errcode === 0) {
							this.$store.commit('editWxIdentifier', info.data);
							if (info.data.errcode == 0) {
								this.getPanymentCertificate(info.data.openid);
							}
						} else {
							uni.$u.toast(res.data.errmsg);
						}
					}
				}
			});
		},
		// 授权消息通知
		requestSubscribeMessage() {
			uni.requestSubscribeMessage({
				tmplIds: ['7FwP2QozJZzqJ7vzbeiWMESpPDkI8nABVAi9rRljn6Q'],
				success: res => {
					this.requestPayment();
				}
			});
		},
		// 向微信发送通知
		async sendWxNotice() {
			const res = await this.$api.wechat.TemplatePush({
				openid: 'oC2RV5CF48zKs3omlxrPGaETKeqQ',
				orderId: "1063842939379122329",
				userId: '1019787205570199742',
				rechargeMoney: 35
			});
		},
		// 调取充值凭据
		async getPanymentCertificate(openid) {
			const params = {
				total: this.rechargeMoney,
				openid,
				type: 1
			};
			const res = await this.$api.wechat.WXUserPayment(params);
			this.loading = false;
			const { prepay_id, signType, paySign, nonceStr, timeStamp } = res.data;
			wx.requestPayment({
				provider: prepay_id,
				timeStamp: timeStamp,
				nonceStr: nonceStr,
				package: res.data.package,
				signType: signType,
				paySign: paySign,
				success: function(res) {
					if (res.errMsg === 'requestPayment:ok') {
						setTimeout(() => {
							this.$u.toast('充值成功');
						}, 500);
					}
				},
				fail: function(err) {
					this.$u.toast(JSON.stringify(err));
				},
				complete: () => {
					this.loading = false;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.recharge-box {
	.u-input__content__field-wrapper__field {
		height: 100rpx !important;
	}
	.nav-title {
		font-size: 28rpx;
		color: #fff;
	}
	.number-box {
		background: #1daeff;
		padding: 60rpx 0;
		.recharge-number {
			text-align: center;
			font-size: 70rpx;
			color: #fff;
			letter-spacing: 4rpx;
			font-weight: bold;
		}
		.tip-recharge-text {
			text-align: center;
			display: flex;
			justify-content: center;
			color: #fff;
			font-size: 24rpx;
			margin-top: 6rpx;
			.info-text {
				border-bottom: 1px #f20 solid;
				padding: 0 8rpx 9rpx;
				display: inline-block;
				color: #f20;
			}
		}
	}
	.recharge-btn-box {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		.recharge-btn {
			margin: 24rpx 12rpx;
			width: calc(33.33% - 30rpx);
			border: 1px #ccc solid;
			text-align: center;
			font-size: 34rpx;
			padding: 30rpx 0;
		}
		.change-recharge {
			background: linear-gradient(to right, #ff8100, #ffc57b);
			border: 1px #ffc57b solid;
			color: #fff;
		}
	}
}
</style>
